export enum Status {
    Occupied,
    Running,
    Vacant
}

export interface BallStatus {
    ball: Status
}

function BigBall({ ball }: BallStatus) {

    let stylesPrefix = "vacant";

    switch (ball) {
        case Status.Occupied:
            stylesPrefix = "occupied";
            break;
        case Status.Running:
            stylesPrefix = "run";
            break;
        case Status.Vacant:
            stylesPrefix = "vacant"
            break;

    }

    return (
        <div className={`main-ball-wrapper ${stylesPrefix}-big-ball`}>
            <div className={`inner-ball-wrapper ${stylesPrefix}-small-ball`}></div>
        </div>
    )

}

export default BigBall;